<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Theme Editor</title>

<script type="text/javascript">
    require([
        "dojo/parser",
		"dijit/dijit", // optimized layer for loading
        "dijit/form/Button",
        "dijit/Toolbar",
        "dijit/form/CheckBox",
        "dijit/form/ComboBox",
        "dijit/form/TextBox",
        "dijit/Calendar",
        "dijit/layout/TabContainer",
        "dijit/layout/ContentPane",
        "dijit/layout/AccordionContainer",
        "dijit/TitlePane",
    	"dijit/layout/BorderContainer",
    	"dijit/Menu"
    	]);
</script>

</head>
<body class="claro">

 <style>
  body {
    padding : 5px;
    margin : 0;
}

  .theming-group {
    padding : 0;
    padding-top : .3em;
    padding-bottom : 0;
    border-spacing : 0;
}

  .theming-group-title {
    color : #333;
    font-family : cursive;
    background-color : #aaa;
    padding-left : .3em;
}

  .theming-group-widgets {
    padding : 0;
}

  -widgets#other {
    width : 40em;
}

  #SampleContentPane {
    width : 200px;
    overflow : hidden;
}

  #SampleAccordionPane {
    width : 200px;
    height : 150px;
}

  #SampleTabContainer {
    width : 175px;
    height : 150px;
}

  .widget-sample {
    margin-left : .3em;
    margin-right : .3em;
    margin-top : .3em;
    margin-bottom : .1em;
}

 </style>
 <div class="theming-group">
  <div class="theming-group-title">
			Global Styling
		</div>
  <div class="theming-group-widgets">
   <div class="widget-sample">
   	 <label id="label_0" class="dvThemeWidget">
					Generic text: Click on this text block to set defaults for various inheritable
					properties, such as font properties.
				</label>
   </div>
   <div class="globalWidget">
    <div dojoType="dijit.layout.TabContainer" id="all" class="dvThemeWidget" tabStrip="true" style="width: 700px; height: 6em;">
      <div dojoType="dijit.layout.ContentPane" title="Global Background and Border" doLayout="true" ioArgs="{}" selected="true" style="left: 0px; top: 0px; width: 163px; height: 3.5em;">
							This widget applies background color and border color changes on a global basis to all 
							the widgets for all the states.
						</div>

    </div>
   </div>
  </div>
 </div>
 <div class="theming-group">
  <div class="theming-group-title">
			Primitive Widgets
		</div>
  <div class="theming-group-widgets">
   <table role="presentation">
    <tbody>
     <tr valign="top">
      <td style="width:150px">
      <div class="widget-sample">
      	<button id="maqetta_claro_theme_html_button" type="button" class="dvThemeWidget">HTML Button</button>
      </div>
      <div class="widget-sample">
       <div class="widget-sample">
        <button id="maqetta_claro_theme_button" type="button" dojoType="dijit.form.Button" id="1465" value="Button" class="dvThemeWidget">Button</button>
       </div>
       <div>
        <input id="maqetta_claro_theme_checkbox" dojoType="dijit.form.CheckBox" type="checkbox" class="dvThemeWidget">CheckBox</input>
       </div>
       <div>Menu:</div>
       <div dojoType="dijit.Menu" id="windowContextMenu" contextMenuForWindow="false" class="dvThemeWidget">
        <div dojoType="dijit.MenuItem">
									MenuItem
								</div>
        <div dojoType="dijit.CheckedMenuItem" class="CheckedMenuItemLocator">
									CheckedMenuItem
								</div>
        <div dojoType="dijit.MenuSeparator">
        </div>
        <div dojoType="dijit.PopupMenuItem" class="themeEditorLocator">
         <span>
										Popup Submenu
									</span>
         <div dojoType="dijit.Menu" id="submenu1">
          <div dojoType="dijit.MenuItem">
											Submenu Item One
										</div>
                                    </div>
        </div>
       </div>
      </td>
      <td>
       <div class="widget-sample">
        <div dojoType="dijit.Calendar" class="dvThemeWidget" datePackage="dojo.date" value="now" style="-moz-user-select: none;"></div>
       </div>
      </td>
      <td>
       <div dojoType="dijit.Toolbar" class="dvThemeWidget" isContainer="true" id="maqetta_claro_theme_toolbar">
        <input dojoType="dijit.form.Button" type="dijit.form.Button" tabIndex="-1" label="Tool 1">
        </input>
        <input dojoType="dijit.form.Button" type="dijit.form.Button" tabIndex="-1" label="Tool 2">
        </input>
       </div>
       <div id="widget-sample-TextBox" class="widget-sample">
        <input type="text" dojoType="dijit.form.TextBox" id="firstname" name="myTextBox" value="TextBox (text input widget)" trim="true" style="width:15em" class="dvThemeWidget"></input>
       </div>
       <select dojoType="dijit.form.ComboBox" class="dvThemeWidget" type="dijit.form.ComboBox" value="TextBox subwidget" constraints="{}" fetchProperties="{}">
         <option value="1">Item 1</option>
         <option value="2">Item 2</option>
         <option value="3">Item 3</option>
       </select>
       <div dojoType="dijit.davinci.themeEditor.Tooltip"
           class="dvThemeWidget"
           style="width:165px; height:40px; top:auto; left:auto; z-index:1;"
           >
            Content for Tooltip widget...
       </div>
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>
 <div class="theming-group">
  <div class="theming-group-title">
			Container Widgets
		</div>
  <div class="theming-group-widgets">
   <table role="presentation">
    <tbody>
     <tr valign="top">
      <td>
       <div class="widget-sample">
        <div dojoType="dijit.layout.ContentPane" id="SampleContentPane" class="dvThemeWidget" doLayout="true" style="width: 163px; height: 175px;" ioArgs="{}">ContentPane for Content Pane</div>
       </div>
      </td>
      <td>
       <div class="widget-sample">
        <div dojoType="dijit.layout.AccordionContainer" id="SampleAccordionPane" class="dvThemeWidget" duration="200" style="width: 163px; height: 200px;">
         <div dojoType="dijit.layout.ContentPane" title="Accordion - Pane 1" doLayout="true" errorMessage="&lt;span class='dijitContentPaneError'&gt;Sorry, an error occurred&lt;/span&gt;" ioArgs="{}" loadingMessage="&lt;span class='dijitContentPaneLoading'&gt;Loading...&lt;/span&gt;" selected="true">ContentPane for Accordion Pane 1.</div>
         <div dojoType="dijit.layout.ContentPane" title="Accordion - Pane 2" doLayout="true" errorMessage="&lt;span class='dijitContentPaneError'&gt;Sorry, an error occurred&lt;/span&gt;" ioArgs="{}" loadingMessage="&lt;span class='dijitContentPaneLoading'&gt;Loading...&lt;/span&gt;" selected="true">ContentPane for Accordion Pane 2.</div>

        </div>
       </div>
      </td>
      <td>
       <div dojoType="dijit.layout.TabContainer" id="SampleTabContainer" class="dvThemeWidget" tabStrip="true" style="width: 250px; height: 200px;">
        <div dojoType="dijit.layout.ContentPane" title="Tab 1" doLayout="true" ioArgs="{}" selected="true" style="left: 0px; top: 0px; width: 250px; height: 150px;">
									When changing the width of the border it may be necessary to adjust the bottom padding on the Tab subwidget 
									and the bottom and top margins on the TabStripe subwidget. 
									For example in the Normal state Tab subwidget border-width 3px; and padding 3px 8px 1px 4px;
									TabStrip subwidget margin-top 0px; margin-right 1px; and margin-bottom -3px;
									TabContentPane subwidget border-width 3px;
									</div>

       </div>
      </td>
     </tr>
     <tr>
      <td>
       <div dojoType="dijit.TitlePane" class="dvThemeWidget" title="Pane" doLayout="true" duration="200" open="true" ioArgs="{}" style="width: 163px; height: 175px;">Content for TitlePane Widget.</div>
      </td>
      <td>
       <div dojoType="dijit.layout.BorderContainer" class="dvThemeWidget" design="sidebar" gutters="true" style="width: 163px; height: 175px;">
        <div dojoType="dijit.layout.ContentPane" doLayout="true" ioArgs="{}" region="top" splitter="true">
									ContentPane for BorderContainer.
								</div>
        <div dojoType="dijit.layout.ContentPane" doLayout="true" ioArgs="{}" region="left" splitter="true">
        </div>
        <div dojoType="dijit.layout.ContentPane" doLayout="true" ioArgs="{}" region="center">
									ContentPane for BorderContainer.
								 </div>
       </div>
      </td>
      <td>
       <div dojoType="dijit.davinci.themeEditor.Dialog"
           class="dvThemeWidget"
           style="width:163px; height:175px; position:relative; z-index:1;"
           title="Dialog title"
           >
               <p>Content for Dialog widget...</p>
       </div>
      </td>
     </tr>
    </tbody>
   </table>
  </div>
 </div>

</body>
</html>
